<template>
  <div>
    <el-form
      ref="registrationInfo"
      :model="registrationInfo"
      label-width="100px"
      style="width: 500px"
    >
      <el-form-item label="所属科室" prop="sectionId">
        <el-select
          v-model="registrationInfo.sectionId"
          placeholder="科室"
          @change="doSelectDoctorId"
        >
          <el-option
            v-for="(item, index) in sectionList"
            :key="index"
            :value="item.sectionId"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="医生名" prop="doctorId">
        <el-select v-model="registrationInfo.doctorId" placeholder="医生名">
          <el-option
            v-for="(item, index) in doctorList"
            :key="index"
            :value="item.userId"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="患者名" prop="patientName">
        <el-input v-model="registrationInfo.patientName" placeholder="患者名">
        </el-input>
      </el-form-item>
      <el-form-item label="患者身份证" prop="patientCard">
        <el-input
          v-model="registrationInfo.patientCard"
          placeholder="患者身份证"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="支付状态" prop="isPayment">
        <el-select v-model="registrationInfo.isPayment" placeholder="支付状态">
          <el-option :value="0" label="未完成"></el-option>
          <el-option :value="1" label="完成"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期" prop="date">
        <el-date-picker
          v-model="registrationInfo.date"
          value-format="yyyy-MM-dd"
          type="date"
        ></el-date-picker>
      </el-form-item>
    </el-form>

    <el-button @click="handleConfirmAddDialog" style="margin-left: 100px"
      >增加</el-button
    >
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      doctorList: [],
      sectionList: [],
      hospitalId: 0,
      registrationInfo: {
        sectionId: "",
        doctorId: "",
        patientName: "",
        patientCard: "",
        date: "",
        isComplete: 0,
        isAppointment: 0,
        isPayment: "",
      },
    };
  },
  methods: {
    changeDoctorId(val) {
      this.registrationInfo.doctorId = "";
      this.doSelectDoctorId(val);
    },

    doSelectDoctorId(val) {
      this.$store
        .dispatch("user/allScheduleId", {
          sectionId: val,
        })
        .then((res) => {
          this.doctorList = res;
        });
    },
    doSelectAllSection(val) {
      this.$store
        .dispatch("section/allId", {
          hospitalId: val,
        })
        .then((res) => {
          this.sectionList = res;
        });
    },

    handleConfirmAddDialog() {
      this.$store.dispatch("registration/addNurse", this.registrationInfo);
        this.registrationInfo = {
        sectionId: "",
        doctorId: "",
        patientName: "",
        patientCard: "",
        date: "",
        isComplete: 0,
        isAppointment: 0,
        isPayment: "",
      }
    },

    formatDate(value) {
      var year = value.getFullYear();
      var month = value.getMonth() + 1;
      var day = value.getDate();

      if (month < 10) {
        month = "0" + month;
      }

      if (day < 10) {
        day = "0" + day;
      }

      return year + "-" + month + "-" + day;
    },
  },
  created() {
    this.hospitalId =
      localStorage.getItem("hospitalId") === "null"
        ? "null"
        : parseInt(localStorage.getItem("hospitalId"));
    if (this.hospitalId !== "null") {
      this.doSelectAllSection(this.hospitalId);
    }
  },
};
</script>

<style scoped>
</style>